<template>
  <div class="dashboard-content" style="position:absolute;width:100%;">
    <el-card shadow="none" :body-style="{padding: '0px', position:'absolute', height:'100%', width: '100%'}">
      <div class="card-box clearfix" style="height:100%;">
        <div slot="header" class="clearfix card-title">
          <span>{{content.name}}</span>
          <el-button class="btn-more" type="text">更多 <i class="el-icon-d-arrow-right"></i></el-button>
        </div>
        <template>
          <div class="tabs-content-box" style="width: 38%; height: 100%;float:left;">
            <!--<div id="chart" :style="{width: '100%', height: '100%'}" auto-resize></div>-->
            <v-chart :options="barOption" :style="{width: '100%', height: '100%'}" :autoresize="true"> </v-chart>
          </div>
          <div class="tabs-content-box" style="width: 61%; height: 100%;float:right;">
            <template>
              <div class="tableTitle">{{tableTitle}}</div>
              <div class="info">
                  <div class="AssetItem" v-for="(item,index) in AssetInfoList" :key="index">
                    <span>{{index+1}}.{{item.categoryName}}</span><span class="dateUse">{{item.dataUse}}</span>
                    <el-link type="primary" @click="btnAsset" class="btnAsset">{{item.btnName}}</el-link>
                  </div>
              </div>
            </template>
          </div>  
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
//let echarts = require('echarts/lib/echarts');
import ECharts from '~/static/js/vue-echarts';
import { assetInfoGr } from './data/Content.js';
//import option from '/portal/data/ChartsData.json';
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/chart/pie');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default {
    name: 'AssetInfoGr',
    props: ['content'],
    data(){
        return {
            barOption: {},
            AssetInfoList: [],
            tableTitle:'',
            dataUse:'',
            btnAsset:''
        };
    },
    components: {
        'v-chart': ECharts
    },
    created:function (){
        this.getAssetInfoList();
    },
    methods: {
        getAssetInfoList(){
            this.$axios.get(assetInfoGr.url2)
                .then(res => {
                    this.AssetInfoList = res.data[0].listData;
                    this.tableTitle=res.data[0].title;
                });
        }
    },
    mounted() {
        this.$axios.get(assetInfoGr.url1)
            .then(res => {
                this.barOption = res.data;
            });
    }
};
</script>

<style scoped lang="scss">
  .card-box {

    .tableTitle{
      font-size:14px;
      font-weight:bold;
      color:#333;
      margin-bottom:6px;
    }
    .info{
      font-size:14px;
      padding:6px 0;
      color:#333;
    }
    .AssetItem{
      background:#F0F2F4;
      padding: 6px 2%;
      margin: 6px 0;
      border-radius: 4px;
    }
    .AssetItem span.dateUse{
      color:#E02020;
      margin-left:10%;
    }
    .AssetItem .btnAsset{
      float:right;
      font-weight:normal;
    }
  }
  
</style>
